﻿@* 定义页面路由，支持不同的URL参数组合，用于访问不同的指标页面 *@
@page "/metrics"
@page "/metrics/resource/{applicationName}"
@page "/metrics/resource/{applicationName}/meter/{meterName}"
@page "/metrics/resource/{applicationName}/meter/{meterName}/instrument/{instrumentName}"

@* 引入必要的命名空间，用于访问相关的模型和资源类 *@
@using iPanel.Model.Otlp
@using iPanel.Otlp.Model
@using iPanel.Resources
@using iPanel.Utils
@* 注入本地化字符串资源，用于多语言支持 *@
@inject IStringLocalizer<iPanel.Resources.Metrics> Loc
@inject IStringLocalizer<ControlsStrings> ControlsStringsLoc

<PageTitle>
    @{
        // 定义一个字符串变量，用于存储页面标题的额外文本
        string? additionalText;
        // 检查当前选中的应用程序是否有副本集名称
        if (PageViewModel.SelectedApplication.Id is { ReplicaSetName: { } replicaSetName })
        {
            // 如果选中了某个指标仪器，则额外文本为副本集名称和仪器名称
            additionalText = PageViewModel.SelectedInstrument is { } selectedInstrument
            ? $"{replicaSetName} - {selectedInstrument.Name}"
            // 否则，额外文本仅为副本集名称
            : replicaSetName;
        }
        else
        {
            // 如果没有选中副本集，则额外文本为空
            additionalText = null;
        }
    }

    <ApplicationName AdditionalText="@additionalText"
                     ResourceName="@nameof(iPanel.Resources.Metrics.MetricsPageTitle)"
                     Loc="@Loc" />
</PageTitle>

<div class="page-content-container">
    <AspirePageContentLayout AddNewlineOnToolbar="true"
                             @ref="_contentLayout"
                             HeaderStyle="margin-bottom: calc(var(--design-unit) * 2px);"
                             MobileToolbarButtonText="@Loc[nameof(iPanel.Resources.Metrics.MetricsViewAttributesToolbar)]">
        <PageTitleSection>
            <h1 class="page-header">@Loc[nameof(iPanel.Resources.Metrics.MetricsHeader)]</h1>
        </PageTitleSection>
        <ToolbarSection>
            <ResourceSelect Resources="_applicationViewModels"
                            AriaLabel="@ControlsStringsLoc[nameof(ControlsStrings.SelectAnApplication)]"
                            @bind-SelectedResource="PageViewModel.SelectedApplication"
                            @bind-SelectedResource:after="HandleSelectedApplicationChangedAsync"
                            CanSelectGrouping="true"
                            LabelClass="toolbar-left" />

            <PauseIncomingDataSwitch IsPaused="@PauseManager.AreMetricsPaused(out _)" IsPausedChanged="@PauseManager.SetMetricsPaused" />
            <ClearSignalsButton SelectedResource="PageViewModel.SelectedApplication"
                                HandleClearSignal="ClearMetrics" />

            @if (!ViewportInformation.IsDesktop)
            {
                <FluentIcon slot="end" Icon="Icons.Regular.Size20.Clock" Style="margin-right:5px;" />
            }

            <FluentSelect slot="end" TOption="SelectViewModel<TimeSpan>"
                          Items="@_durations"
                          OptionText="@(c => c.Name)"
                          @bind-SelectedOption="PageViewModel.SelectedDuration"
                          @bind-SelectedOption:after="HandleSelectedDurationChangedAsync"
                          AriaLabel="@Loc[nameof(iPanel.Resources.Metrics.MetricsSelectADuration)]" />

            @if (!ViewportInformation.IsDesktop)
            {
                // Show metric selector in the toolbar for mobile, since we don't have enough room to show both
                // panels on a mobile viewport.
                <TreeMetricSelector @ref="_treeMetricSelector"
                                    PageViewModel="@PageViewModel"
                                    IncludeLabel="true"
                                    HandleSelectedTreeItemChangedAsync="@HandleSelectedTreeItemChangedAsync" />
            }
        </ToolbarSection>
        <MainSection>
            <div style="width: 100%; height: 100%; overflow: auto;">
                @if (PageViewModel.Instruments?.Count > 0)
                {
                    // Collapsed property only allows us to show Panel1 (which is the metric selector)
                    // but we want to only show Panel2 on mobile. So, hide the bar handle and reduce width to 0
                    // on mobile.
                    <FluentSplitter BarHandle="@ViewportInformation.IsDesktop"
                                    Style="height:100%"
                                    Panel1Size="@(ViewportInformation.IsDesktop ? "2fr" : "0")"
                                    Panel2Size="8fr"
                                    BarSize="@(ViewportInformation.IsDesktop ? 5 : 0)">
                        <Panel1>
                            @if (ViewportInformation.IsDesktop)
                            {
                                <TreeMetricSelector @ref="_treeMetricSelector"
                                                    PageViewModel="@PageViewModel"
                                                    HandleSelectedTreeItemChangedAsync="@HandleSelectedTreeItemChangedAsync" />
                            }
                        </Panel1>
                        <Panel2>
                            <div>
                                <div class="metrics-content">
                                    @if (PageViewModel.SelectedApplication.Id?.ReplicaSetName != null && PageViewModel is { SelectedMeter: not null, SelectedInstrument: not null })
                                    {
                                        <ChartContainer ApplicationKey="@(PageViewModel.SelectedApplication.Id.GetApplicationKey())"
                                                        MeterName="@(PageViewModel.SelectedMeter.MeterName)"
                                                        InstrumentName="@(PageViewModel.SelectedInstrument.Name)"
                                                        Duration="PageViewModel.SelectedDuration.Id"
                                                        ActiveView="@(PageViewModel.SelectedViewKind ?? Metrics.MetricViewKind.Graph)"
                                                        OnViewChangedAsync="@OnViewChangedAsync"
                                                        Applications="@_applications" />
                                    }
                                    else if (PageViewModel.SelectedMeter != null)
                                    {
                                        <h3 class="meter-name-title">@PageViewModel.SelectedMeter.MeterName</h3>
                                        <FluentDataGrid Style="max-width:1100px;"
                                                        Items="@PageViewModel.Instruments.Where(i => i.Parent == PageViewModel.SelectedMeter).OrderBy(i => i.Name).AsQueryable()"
                                                        GridTemplateColumns="3fr 5fr"
                                                        RowSize="DataGridRowSize.Medium"
                                                        TGridItem="OtlpInstrumentSummary">
                                            <ChildContent>
                                                <TemplateColumn Title="@Loc[nameof(iPanel.Resources.Metrics.MetricsInsturementNameGridNameColumnHeader)]">
                                                    <FluentAnchor Href="@DashboardUrls.MetricsUrl(resource: PageViewModel.SelectedApplication.Name, meter: context.Parent.MeterName, instrument: context.Name, duration: DurationMinutes, view: ViewKindName)" Appearance="Appearance.Lightweight">
                                                        @Loc[context.Name]
                                                    </FluentAnchor>
                                                </TemplateColumn>
                                                <PropertyColumn Title="@Loc[nameof(iPanel.Resources.Metrics.MetricsInsturementDescriptionGridNameColumnHeader)]" Property="@(c => c.Description)" Tooltip="true" TooltipText="@(c => c.Description)" />
                                            </ChildContent>
                                        </FluentDataGrid>
                                    }
                                    else
                                    {
                                        @if (ViewportInformation.IsDesktop)
                                        {
                                            <p>@Loc[nameof(iPanel.Resources.Metrics.MetricsSelectInstrument)]</p>
                                        }
                                        else
                                        {
                                            <div class="empty-content">
                                                <FluentAnchor Href="#" Appearance="Appearance.Hypertext" OnClick="@(async () => await _contentLayout!.OpenMobileToolbarAsync())">
                                                    @Loc[nameof(iPanel.Resources.Metrics.MetricsSelectInstrument)]
                                                </FluentAnchor>
                                            </div>
                                        }
                                    }
                                </div>
                            </div>
                        </Panel2>
                    </FluentSplitter>
                }
                else if (PageViewModel.Instruments == null)
                {
                    <div class="empty-content">
                        @if (ViewportInformation.IsDesktop)
                        {
                            <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />

                            @:&nbsp;
                            @Loc[nameof(iPanel.Resources.Metrics.MetricsSelectAResource)]
                        }
                        else
                        {
                            <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />

                            @:&nbsp;
                            <FluentAnchor Href="#" Appearance="Appearance.Hypertext" OnClick="@(async () => await _contentLayout!.OpenMobileToolbarAsync())">@Loc[nameof(iPanel.Resources.Metrics.MetricsSelectAResource)]</FluentAnchor>
                        }
                    </div>
                }
                else
                {
                    <div class="empty-content">
                        <FluentIcon Icon="Icons.Regular.Size24.ChartMultiple" />&nbsp;@Loc[nameof(iPanel.Resources.Metrics.MetricsNoMetricsForResource)]
                    </div>
                }
            </div>
        </MainSection>
    </AspirePageContentLayout>
</div>
